<template>
  <div class="xuanyngren" >
    <div class="top">
      <div class="imgdiv">
        <!--        <img src="../../assets/khImg/back.png" @click="tuichuBtn" alt="返回">-->
      </div>
      <div class="title">{{formdata.programmeName}}</div>
      <div class="divBtn">
        <el-button  @click="tuichuBtn">返回</el-button>
      </div>
    </div>
    <div class="bottomdiv">
      <div class="boottop">
        <div class="lest">
          <span class="lestname"> <img src="../../assets/khImg/qiyename.png" alt=""><b>企业名称：{{formdata.assessItemName}}</b> </span>
          <span class="rightname"> <img src="../../assets/khImg/time.png" alt=""><b>评议时间：{{formdata.time}}</b> </span>
        </div>
        <div class="right">
          <el-button class="baocun"  size="small"  @click="tijiao">保存</el-button>
          <el-button class="tijiao"  size="small"  @click="baocun">提交</el-button>
        </div>
      </div>
      <div class="xian"></div>

      <div class="divbody">
        <!--        第一部分-->
        <div v-show="item.indexType=='0'" class="pingjia" v-for="item in formdata.assessRules">
          <div class="pjtitle"><span v-show="item.required" style="color: red">*</span> {{item.indexName}}</div>
          <div class="xuanxiang" >
            <div v-for="row in item.options">
              <div class="radioxz">
                <span>{{row.optionName}}</span>
                <el-radio v-model="item.value" :label="row.optionValue" @change="jianting(item.value)">
                  <span v-show="false">11</span>
                </el-radio>
              </div>
            </div>
          </div>
        </div>
        <!--        第二部分-->
        <div class="zhongjian"  v-show="item.indexType=='1'" v-for="item in formdata.assessRules">
          <div class="titletwo">
            <span v-show="item.required" style="color: red">*</span> {{item.indexName}}
          </div>
          <div class="xuanzhe">
            <ul v-for="row in item.options">
              <li >
                <el-checkbox v-show="row.other==false" v-model="row.value" >{{row.optionName}}</el-checkbox>

                <span v-show="row.other==true">
                  <el-checkbox v-model="row.value" @change="checkedBtn(row)"></el-checkbox>
                  <span class="qita">其他（请注明）</span>
                  <input type="text" class="inputsr" v-model="row.otherText" :disabled="!row.value">
<!--                  <span>（如选此项，请填写具体内容）</span>-->
                </span>

              </li>
            </ul>
          </div>
        </div>
        <!--第三部分数据-->
        <div class="bottom" v-show="item.indexType=='2'" v-for="item in formdata.assessRules">
          <div class="titlenamr">
            <span v-show="item.required" style="color: red">*</span> {{item.indexName}}
          </div>
          <textarea  maxlength="300" v-model="item.value" name="" id="" cols="30" rows="10" ></textarea>
        </div>

      </div>

    </div>


  </div>
</template>

<script>
  import request from '@/utils/request'
  export default {
    name: "home",
    data() {
      return {
        locked:true,
        //总数居
        formdata:{
          programmeName:'',
          explainText:'',
          assessItemName:'',
          time:'',
          assessRules:[],
        },
        textarea:'',
        radiomy:false,//满意
        //第二部分数据
        twoData:{
          title:' 5，你认为本单位有啥问题吗？（可多选）',
          duoxuanArr:[
            {checked:false,name:'(1)发挥规范化',shuru:'2'},
            {checked:false,name:'(2)发挥规范化',shuru:'2'},
            {checked:false,name:'(3)发挥规范化',shuru:'1',model:''},
          ]
        },
        //第一部分数据
        tabelList:[
          {
            titleName:'1,对本单位选人用人工作的总评价',
            model:'danwei',
            caozuoArr:[
              {label:'1',name:'满意'},
              {label:'2',name:'基本满意'},
              {label:'3',name:'不满意'},
              {label:'4',name:'不了解'},
            ]
          },
          {
            titleName:'2,对本单执行徐娜用人大苏打',
            model:'zhixing',
            caozuoArr:[
              {label:'1',name:'满意2'},
              {label:'2',name:'基本满意2'},
              {label:'3',name:'不满意2'},
              {label:'4',name:'不了解2'},
            ]
          },
        ],

      };
    },

    created() {
      this.getList()



    },
    methods: {
      //提交
      baocun:function(){
        console.log(this.formdata)
        this.formdata.locked = true
        request({
          url: '/kh/fe/programme2',
          method: 'post',
          data:this.formdata
        }).then(response => {
          this.$message({
            type: 'success',
            message: '提交成功'
          });
          this.getList()
        });
      },
      //保存
      tijiao:function(){
        console.log(this.formdata)
        request({
          url: '/kh/fe/programme2',
          method: 'post',
          data:this.formdata
        }).then(response => {
          this.$message({
            type: 'success',
            message: '保存成功'
          });
          this.getList()
        });
      },
      getTime:function(){
        var date = new Date();
        var nian=date.getFullYear(); //获取完整的年份(4位)
        var yue =date.getMonth()+1; //获取当前月份(0-11,0代表1月)
        var ri = date.getDate(); //获取当前日(1-31)
        if(yue<9){
          yue = "0"+yue
        }
        if(ri<9){
          ri = "0"+ri
        }
        this.formdata.time = nian+'年'+yue+'月'+ri+'日'
      },
      //获取列表数据
      getList:function() {
        request({
          url: '/kh/fe/programme/'+this.$route.query.data,
          method: 'get',
        }).then(response => {
          this.formdata = response.data
          this.getTime()
        });
      },

      //文本域监听
      textareaBtn:function(row){
        console.log('文本域',row)
      },
      //多选框监听
      checkedBtn:function(row){
        console.log('其他复选框',row)
      },
      //单选框监听
      jianting:function(row) {
        console.log(row)

      },
      //返回
      tuichuBtn:function(){
        this.$router.push('/homePage');
      },

    }
  };
</script>

<style  lang="scss" >
  body{
    background-color: #f5f5f5;
  }
 .xuanyngren{
   margin: 0;
   padding: 0;
   /*position: absolute;*/
   .el-radio__input {
     margin-left: 20px;
   }
   .top {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 9;
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     height: 100px;
     background-color: #1085ca;
     .imgdiv {
       margin-left: 60px;
       img {
         width: 48px;
         height: 48px;
       }
     }
     .title {
       height: 30px;
       font-family: MicrosoftYaHei;
       font-size: 30px;
       font-weight: normal;
       font-stretch: normal;
       line-height: 20px;
       letter-spacing: 0px;
       color: #ffffff;
     }
     .divBtn {
       margin-right: 60px;
       .el-button {
         width: 121px;
         height: 40px;
         background-color: #f6f6f6;
         border-radius: 6px;
         font-family: MicrosoftYaHei;
         font-size: 18px;
         font-weight: normal;
         font-stretch: normal;
         line-height: 20px;
         letter-spacing: 0px;
         color: #0186d1;
       }
     }
   }
   .bottomdiv {
     width: 1604px;
     height: 100%;
     margin: auto;
     margin-top: 155px;
     margin-bottom: 50px;
     padding-bottom: 30px;
     background-color: #ffffff;
     box-shadow: 0px 2px 7px 0px
     rgba(0, 0, 0, 0.2);
     border-radius: 14px;
     .boottop {
       height: 93px;
       width: 1294px;
       margin-left: 160px;
       display: flex;
       align-items: center;
       justify-content: space-between;
       .lest {
         .lestname {
           img {
             width: 24px;
             height: 25px;
             margin-right: 13px;
             vertical-align:middle;
             margin-top: -11px;
           }
           font-family: MicrosoftYaHei-Bold;
           font-size: 18px;
           font-weight: normal;
           font-stretch: normal;
           line-height: 20px;
           letter-spacing: 0px;
           color: #000000;
         }
         .rightname {
           vertical-align: text-bottom;
           margin-left: 108px;
           img {
             width: 25px;
             height: 25px;
             margin-right: 13px;
             vertical-align:middle;
             margin-top: -10px;
           }
           font-family: MicrosoftYaHei-Bold;
           font-size: 18px;
           font-weight: normal;
           font-stretch: normal;
           line-height: 20px;
           letter-spacing: 0px;
           color: #000000;
         }
       }
       .right {
         .baocun {
           width: 63px;
           height: 40px;
           background-color: #00c882;
           border-radius: 8px;
           font-family: MicrosoftYaHei;
           font-size: 16px;
           font-weight: normal;
           font-stretch: normal;
           line-height: 19px;
           letter-spacing: 0px;
           color: #ffffff;
           margin-right: 20px;
         }
         .tijiao {
           width: 63px;
           height: 40px;
           background-color: #0186d1;
           border-radius: 8px;
           font-family: MicrosoftYaHei;
           font-size: 16px;
           font-weight: normal;
           font-stretch: normal;
           line-height: 19px;
           letter-spacing: 0px;
           color: #ffffff;
         }
       }
     }
     .xian {
       width: 1525px;
       height: 1px;
       border: solid 1px #d2d2d2;
       margin-left: 40px;
     }
     .divbody {
       width: 1294px;
       margin-left: 150px;
       margin-top: 19px;
       .pingjia {
         width: 100%;
         border-radius: 6px;
         border: solid 1px #aaaaaa;
         margin-bottom: 10px;
         div {
           height: 36px;
           line-height: 36px;
         }
         .pjtitle {
           width: 1292px;
           height: 48px;
           background-color: #ecf3ff;
           border-radius: 6px 6px 0px 0px;
           font-family: MicrosoftYaHei;
           font-size: 18px;
           font-weight: normal;
           font-stretch: normal;
           letter-spacing: 0px;
           color: #000000;
           line-height: 48px;
           padding-left: 26px;
         }
         .xuanxiang {
           font-family: MicrosoftYaHei;
           font-size: 18px;
           font-weight: normal;
           font-stretch: normal;
           line-height: 20px;
           letter-spacing: 0px;
           color: #000000;
           display: flex;
           justify-content: space-around;
           align-items: center;
           height: 68px;
           div {
             width: 100%;
             text-align: center;
           }
           .radioxz{
             display: flex;
             justify-content: center;
             align-items: center;
           }
           .el-radio__input {
             margin-left: 21px;
           }
         }
       }
     }
     .zhongjian {
       width: 1294px;
       border-radius: 6px;
       border: solid 1px #aaaaaa;
       .titletwo {
         width: 1292px;
         height: 48px;
         background-color: #ecf3ff;
         border-radius: 6px 6px 0px 0px;
         font-family: MicrosoftYaHei;
         font-size: 18px;
         font-weight: normal;
         font-stretch: normal;
         letter-spacing: 0px;
         color: #000000;
         line-height: 48px;
         padding-left: 26px;
       }
       .xuanzhe {
         margin-top: 24px;
         .el-checkbox__label {
           color: #000000;
         }
       }
       ul {
         margin: 0;
         padding: 0;
       }
       li {
         height: 25px;
         line-height: 25px;
         font-size: 14px;
         padding-left: 33px;
         list-style:none;
         color: #606266;
       }
       .inputsr {
         border: none;
         border-bottom:1px solid black;
         margin-left: 5px;
         outline:none
       }
       .qita {
         margin-left: 13px;
         color: #000000;
       }
     }
     .bottom {
       width: 1294px;
       border-radius: 6px;
       margin-top: 10px;
       border: solid 1px #aaaaaa;
       .titlenamr {
         width: 1292px;
         height: 48px;
         background-color: #ecf3ff;
         border-radius: 6px 6px 0px 0px;
         font-family: MicrosoftYaHei;
         font-size: 18px;
         font-weight: normal;
         font-stretch: normal;
         letter-spacing: 0px;
         color: #000000;
         line-height: 48px;
         padding-left: 26px;
       }
       div {
         height: 36px;
         line-height: 36px;
       }
       textarea {
         border: none;
         width: 100%;
         outline:none;
         padding-left: 47px;
         padding-top: 25px;
       }
     }
   }



 }
  @media screen and (max-width:800px){
    body{
      background-color: #f5f5f5;
    }
    .xuanyngren{
      margin: 0;
      padding: 0;
      /*position: absolute;*/
      .el-radio__input {
        margin-left: 20px;
      }
      .top {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 5em;
        background-color: #1085ca;
        .imgdiv {
          margin-left: 60px;
          img {
            width: 48px;
            height: 48px;
          }
        }
        .title {
          height: 100%;
          font-family: MicrosoftYaHei;
          font-size: 1.3em;
          font-weight: normal;
          font-stretch: normal;
          line-height: 4em;
          letter-spacing: 0px;
          color: #ffffff;
          overflow: hidden;
        }
        .divBtn {
          margin-right: 60px;
          .el-button {
            width: 6em;
            height: 2.2em;
            background-color: #f6f6f6;
            border-radius: 6px;
            font-family: MicrosoftYaHei;
            font-size: 1em;
            font-weight: normal;
            font-stretch: normal;
            line-height: 1em;
            letter-spacing: 0px;
            color: #0186d1;
          }
        }
      }
      .bottomdiv {
        width: 100%;
        height: 100%;
        margin: auto;
        margin-top: 6em;
        margin-bottom: 5em;
        padding-bottom: 3em;
        background-color: #ffffff;
        -webkit-box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.2);
        box-shadow: 0px 2px 7px 0px rgba(0,0,0,0.2);
        border-radius: 8px;
        .boottop {
          height: 5em;
          width: 100%;
          margin-left: 0.5em;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;
          .lest {
            width: 68%;
            .lestname {
              padding-left: 1em;
              img {
                width: 15px;
                height: 15px;
                margin-right: 0.5em;
                vertical-align: middle;
                margin-top: -5px;
              }
              font-family: MicrosoftYaHei-Bold;
              font-size: 14px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 20px;
              letter-spacing: 0px;
              color: #000000;
            }
            .rightname {
              vertical-align: text-bottom;
              margin-left: 1em;
              font-family: MicrosoftYaHei-Bold;
              font-size: 14px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 20px;
              letter-spacing: 0px;
              color: #000000;
              display: block;
              margin-top: 0.3em;
              img {
                width: 15px;
                height: 15px;
                margin-right: 0.5em;
                vertical-align:middle;
                margin-top: -5px;
              }
            }
          }
          .right {
            width: 30%;
            .baocun {
              width: 4em;
              height: 2em;
              background-color: #00c882;
              border-radius: 8px;
              font-family: MicrosoftYaHei;
              font-size: 14px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 0em;
              letter-spacing: 0px;
              color: #ffffff;
              margin-right: 2em;
              margin-left: 0.7em;
            }
            .tijiao {
              width: 4em;
              height: 2em;
              background-color: #0186d1;
              border-radius: 8px;
              font-family: MicrosoftYaHei;
              font-size: 14px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 0em;
              letter-spacing: 0px;
              color: #ffffff;
            }
          }
        }
        .xian {
          width: 100%;
          height: 1px;
          border: solid 1px #d2d2d2;
          margin-left: 0px;
        }
        .divbody {
          width: 100%;
          margin-left: 2px;
          margin-top: 1em;
          .pingjia {
            width: 100%;
            border-radius: 6px;
            border: solid 1px #aaaaaa;
            margin-bottom: 10px;
            div {
              height: 36px;
              line-height: 36px;
            }
            .pjtitle {
              width: 100%;
              height: 3em;
              background-color: #ecf3ff;
              border-radius: 6px 6px 0px 0px;
              font-family: MicrosoftYaHei;
              font-size: 14px;
              font-weight: normal;
              font-stretch: normal;
              letter-spacing: 0px;
              color: #000000;
              line-height: 3em;
              padding-left: 2em;
            }
            .xuanxiang {
              font-family: MicrosoftYaHei;
              font-size: 14px;
              font-weight: normal;
              font-stretch: normal;
              line-height: 20px;
              letter-spacing: 0px;
              color: #000000;
              display: flex;
              justify-content: space-around;
              align-items: center;
              height: 5em;
              div {
                width: 100%;
                text-align: center;
              }
              .radioxz{
                display: flex;
                justify-content: center;
                align-items: center;
              }
              .el-radio__input {
                margin-left: 21px;
              }
            }
          }
        }
        .zhongjian {
          width: 100%;
          border-radius: 6px;
          border: solid 1px #aaaaaa;
          overflow: hidden;
          .titletwo {
            width: 100%;
            height: 4em;
            background-color: #ecf3ff;
            border-radius: 6px 6px 0px 0px;
            font-family: MicrosoftYaHei;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #000000;
            line-height: 2em;
            padding-left: 2em;
          }
          .xuanzhe {
            margin-top: 24px;
            .el-checkbox__label {
              color: #000000;
            }
          }
          ul {
            margin: 0;
            padding: 0;
          }
          li {
            height: 25px;
            line-height: 25px;
            font-size: 14px;
            padding-left: 33px;
            list-style:none;
            color: #606266;
          }
          .inputsr {
            border: none;
            border-bottom:1px solid black;
            margin-left: 5px;
            outline:none
          }
          .qita {
            margin-left: 13px;
            color: #000000;
          }
        }
        .bottom {
          width: 100%;
          border-radius: 6px;
          margin-top: 10px;
          border: solid 1px #aaaaaa;
          .titlenamr {
            width: 100%;
            height: 3em;
            background-color: #ecf3ff;
            border-radius: 6px 6px 0px 0px;
            font-family: MicrosoftYaHei;
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #000000;
            line-height: 3em;
            padding-left: 2em;

          }
          div {
            height: 36px;
            line-height: 36px;
          }
          textarea {
            border: none;
            width: 100%;
            outline: none;
            padding-left: 1em;
            padding-top: 1em;
          }
        }
      }



    }
  }

</style>
